<template>
	<el-container>
		<el-header class="header-search">
			<search-header
				:search-form="searchForm"
				:search-items="searchItems"
				:expand="expand"
				:fc-table-ref="fcTableRef"
				@expand="expand = $event"
			/>
		</el-header>
		<!-- 表格 -->
		<el-main class="nopadding">
			<fc-table ref="fcTableRef" :indent="20" :requestApi="getUserListApi" :columns="columns"
			          :buttonItems="buttonItems">
				<template #avatar="scope">
					<el-avatar :size="20" :src="formAvatar(scope.row.avatar)"/>
				</template>
				<template #realname="scope">
					<div v-if="scope.row.realname == null">---</div>
					<div v-else>{{ scope.row.realname }}</div>
				</template>
				<template #mobile="scope">
					<div v-if="scope.row.mobile == null">---</div>
					<div v-else>{{ scope.row.mobile }}</div>
				</template>
				<template #identity="scope">
					<div v-if="scope.row.identity == null">---</div>
					<div v-else>{{ scope.row.identity }}</div>
				</template>
				<template #gender="scope">
					<el-tag :type="getGenderType(scope.row.gender)" effect="light">
						{{ filter.gender!.find(item => item.key === scope.row.gender)?.label || '未知' }}
					</el-tag>
				</template>
				<template #state="scope">
					<el-tag effect="light" :type="scope.row.state === 'normal' ? 'primary' : 'danger'">
						{{ filter.state!.find(item => item.key === scope.row.state)?.label || scope.row.state }}
					</el-tag>
				</template>
				<template #options="scope">
					<el-button type="primary" icon="Edit" link v-auth="'user.update'" @click="editClick(scope.row)">
						编辑
					</el-button>
					<el-popconfirm title="确定重置密码吗?" @confirm="resetClick(scope.row)">
						<template #reference>
							<el-button v-auth="'user.reset'" type="warning" link>重置密码</el-button>
						</template>
					</el-popconfirm>
				</template>
			</fc-table>
		</el-main>
		<el-drawer v-model="formViewVisible" :size="500" :with-header="false" destroy-on-close>
			<form-view v-model="formViewVisible" :userID="selectUserID" @success="handleFormSuccess"></form-view>
		</el-drawer>
	</el-container>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, computed} from 'vue'
import {getUserFilterApi, getUserListApi, resetUserApi} from '@/api/modules/setting.ts';
import {ColumnProps, FcTableInstance} from "@/components/fcTable/model"
import {UserModel} from "@/models/settingModel.ts";
import {FilterModel} from "@/models/filterModel.ts";
import SearchInput from '@/components/lcSearch/input.vue'
import SearchSelect from '@/components/lcSearch/select.vue'
import SearchDateRange from '@/components/lcSearch/dateRange.vue'
import SearchHeader from '@/components/lcSearch/header.vue'
import FormView from "@/views/setting/user/components/form.vue";
import {formAvatar} from "@/utils/user.ts";
import {ElMessage} from "element-plus";

const fcTableRef = ref<FcTableInstance | null>(null);
// 搜索部分
const expand = ref(false);
// 过滤器
const filter = reactive<FilterModel>({
	gender: [],
	state: [],
});

const loadFilters = async () => {
	const filterData = await getUserFilterApi();
	filter.gender = Object.entries(filterData.data.data.gender || {}).map(
		([key, label]) => ({key, label})
	);
	filter.state = Object.entries(filterData.data.data.state || {}).map(
		([key, label]) => ({key, label})
	);
};

const getGenderType = (key: string) => {
	switch (key) {
		case 'man':
			return 'primary';
		case 'woman':
			return 'danger';
		default:
			return 'info';
	}
}
// 搜索表单
const searchForm = reactive<Record<string, any>>({
	realname: null,
	nickname: null,
	mobile: null,
	identity: null,
	gender: null,
	state: null,
	created_at: null,
})
// 搜索参数
const searchItems = computed(() => [
	{component: SearchInput, model: 'nickname', props: {label: '昵称', placeholder: '请输入昵称'}},
	{component: SearchInput, model: 'realname', props: {label: '姓名', placeholder: '请输入姓名'}},
	{component: SearchInput, model: 'mobile', props: {label: '联系电话', placeholder: '请输入联系电话'}},
	{component: SearchInput, model: 'identity', props: {label: '身份证号', placeholder: '请输入身份证号'}},
	{
		component: SearchSelect,
		model: 'gender',
		props: {label: '性别', placeholder: '请选择性别', options: filter.gender}
	},
	{component: SearchSelect, model: 'state', props: {label: '状态', placeholder: '请选择状态', options: filter.state}},
	{component: SearchDateRange, model: 'created_at', props: {label: '创建日期'}},
]);

const columns = reactive<ColumnProps<UserModel>[]>([
	{prop: "id", label: "ID", width: 80},
	{prop: "avatar", label: "头像", width: 100},
	{prop: "nickname", label: "昵称"},
	{prop: "realname", label: "姓名"},
	{prop: "mobile", label: "手机号"},
	{prop: "identity", label: "身份证号"},
	{prop: "gender", label: "性别"},
	{prop: "state", label: "状态"},
	{prop: "created_at", label: "创建日期"},
	{prop: "options", label: "操作", width: 280, fixed: "right"}
]);

const buttonItems = computed(() => [
	{auth: 'user.create', icon: 'Plus', event: addUserClick},
]);

const formViewVisible = ref(false);
const selectUserID = ref(0);
// 新增用户
const addUserClick = () => {
	selectUserID.value = 0;
	formViewVisible.value = true;
}
// 编辑用户信息
const editClick = (row: UserModel) => {
	selectUserID.value = row.id;
	formViewVisible.value = true;
}
// 用户重置密码
const resetClick = async (row: UserModel) => {
	const resetData = await resetUserApi({id: row.id});
	ElMessage.success(resetData.message);
}
const handleFormSuccess = () => {
	fcTableRef.value?.reset();
};
onMounted(() => {
	loadFilters();
})
</script>
